Skip to content

Feature: Add copy button to answer UI #2131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
Nov 13, 2024
Merged

Feature: Add copy button to answer UI #2131

merged 8 commits into from
Nov 13, 2024

Conversation

jeannotdamoiseaux
Copy link
Contributor

@jeannotdamoiseaux jeannotdamoiseaux commented Nov 8, 2024 •
edited
Loading

Purpose

This change introduces a "Copy" button to each answer in the chat interface:

  • Copy Button with Icon: A dedicated button alongside each answer, complete with a copy icon, making it visually clear and accessible.
  • Tooltip Support: Tooltips appear when hovering over the button, guiding users on its purpose.
  • Visual Indicator with Checkmark: After clicking, the button displays a confirmation message (e.g., "Copied!") along with a checkmark, providing clear feedback that the text was successfully copied.
  • Automatic Citations Removal: Citations are automatically stripped from the answer text, ensuring a clean copy without references.
  • Auto-Reset Timer: After a short interval, the "Copied!" message resets, allowing users to copy the text again if needed.

This enhancement improves user experience by making it easier for users to copy and paste answers from the chat.

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[ X ] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[ X ] No

Type of change

[ ] Bugfix
[ X ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

  • The current tests all pass (python -m pytest).
  • I added tests that prove my fix is effective or that my feature works
  • I ran python -m pytest --cov to verify 100% coverage of added lines
  • I ran python -m mypy to check for type errors
  • I either used the pre-commit hooks or ran ruff and black manually on my code.

@jeannotdamoiseaux
Copy link
Contributor Author

@pamelafox, could you please review this PR? It’s a relatively straightforward update, with only a few lines of code added. Thanks!

pamelafox
pamelafox reviewed Nov 8, 2024
View reviewed changes
pamelafox
pamelafox reviewed Nov 8, 2024
View reviewed changes
app/frontend/src/locales/da/translation.json Outdated
"info": "Info",
"save": "Gem"
"save": "Gem",
"copy": "Kopier svar",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@EMjetrot Can you review these two strings, "Kopier svar" for "Copy", and "Kopieret!" for copied?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pamelafox - "Kopier svar" is correct, but I would perhaps just say "Kopier" and remove "svar" (eng: answer), since we also don't say "Gem svar", but only "Gem" (eng: save). "Kopieret!" is also correct.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, we'd need to apply this change across all translations for consistency. Personally, I find "Copy answer" a bit more descriptive than just "Copy", but I understand the simplicity of the shorter version as well.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I checked chatgpt.com as they've got a similar copy button and they only use "Copy", so that's an argument for "Copy".

I think we can safely shorten the romance/european languages based on our own knowledge and what chatgpt.com is using, and I've asked @bnodir to comment about the Japense change since that's where I feel the least confident.

manekinekko
manekinekko approved these changes Nov 8, 2024
View reviewed changes
Copy link
Contributor

@manekinekko manekinekko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🇫🇷

@pamelafox
Copy link
Collaborator

@jeannotdamoiseaux The code looks reasonable, thanks for the helpful addition.
Could you add a screenshot to the PR? I need to add a section to our PR template requesting screenshots for UI changes. Thanks!

@jeannotdamoiseaux
Copy link
Contributor Author

@jeannotdamoiseaux The code looks reasonable, thanks for the helpful addition. Could you add a screenshot to the PR? I need to add a section to our PR template requesting screenshots for UI changes. Thanks!

Sure, I'll add these to this PR and my other one as well!
image
image

jeannotdamoiseaux
jeannotdamoiseaux commented Nov 8, 2024
View reviewed changes
bnodir
bnodir reviewed Nov 9, 2024
View reviewed changes
app/frontend/src/locales/ja/translation.json Outdated
Comment on lines 65 to 66
"copy": "回答をコピー",
"copied": "コピーしました！"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

pamelafox
pamelafox reviewed Nov 12, 2024
View reviewed changes
pamelafox
pamelafox reviewed Nov 12, 2024
View reviewed changes
pamelafox
pamelafox reviewed Nov 12, 2024
View reviewed changes
@jeannotdamoiseaux
Copy link
Contributor Author

I believe we have reviewed and adapted all the languages now.

pamelafox
pamelafox reviewed Nov 13, 2024
View reviewed changes
@pamelafox pamelafox changed the title feat: add-copy-button Feature: Add copy button to answer UI Nov 13, 2024
@pamelafox pamelafox merged commit 53bd96e into Azure-Samples:main Nov 13, 2024
10 checks passed
@pamelafox
Copy link
Collaborator

Thanks @jeannotdamoiseaux, merged!

@jeannotdamoiseaux jeannotdamoiseaux deleted the add-copy-button branch December 4, 2024 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pamelafox pamelafox pamelafox approved these changes

+4 more reviewers

@alfredodeza alfredodeza alfredodeza left review comments

@EMjetrot EMjetrot EMjetrot left review comments

@bnodir bnodir bnodir left review comments

@manekinekko manekinekko manekinekko approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@jeannotdamoiseaux @pamelafox @alfredodeza @manekinekko @EMjetrot @bnodir